<template>
  <!-- 点检设置 -->
  <el-dialog v-dialogDrag :close-on-click-modal="false" title="点检设置" :visible.sync="dialogVisible" width="1000px" class="djDialog" @close="closeChange()">
    <button-group ref="buttonGroup" @submitForm="submitForm('ruleForm')" @cancel="dialogVisible = false" />
    <div class="formTopFont">点检设置</div>
    <div style="height:100%;">
      <div class="level">
        <!-- 左边框框 -->
        <div class="transferbox">
          <!-- 待绑定列表 -->
          <el-row class="titlebox">
            <span>待绑定列表</span>
            <div class="searchboxLeft">
              <el-input v-model="leftKeyword" clearable prefix-icon="el-icon-search" size="mini" placeholder="请输入名称或编码进行搜索" @keyup.enter.native="leftTable()" @clear="leftTable()" />
              <div class="searchBtn">
                <el-button size="mini" type="primary" :disabled="multipleSelection.length < 1" icon="el-icon-plus" @click="batchAdd">批量添加</el-button>
              </div>
            </div>
          </el-row>
          <el-row class="table" style="height:230px">
            <el-table ref="multipleTable" border :data="leftTableList" height="100%" stripe @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="40px" align="center" />
              <!-- 点检项 -->
              <el-table-column show-overflow-tooltip label="点检项">
                <template #default="{ row }">{{ row.itemName }}{{ row.itemCode ? '【' + row.itemCode + '】' : '' }}</template>
              </el-table-column>
              <!-- 描述 -->
              <el-table-column show-overflow-tooltip label="描述" prop="remark" />
            </el-table>
          </el-row>
        </div>
        <!-- 右边框框 -->
        <div class="transferbox">
          <!-- 已绑定列表 -->
          <el-row class="titlebox">
            <span>已绑定列表</span>
            <div class="searchbox">
              <el-input v-model="search.keyword" clearable prefix-icon="el-icon-search" size="mini" placeholder="请输入名称或编码进行搜索" @keyup.enter.native="rightTable(1)" @clear="rightTable(1)" />
              <div class="searchBtn">
                <el-button size="mini" type="primary" :disabled="multipleSelection2.length < 1" icon="el-icon-plus" @click="batchDelete">批量移除</el-button>
              </div>
            </div>
          </el-row>
          <el-row class="table" style="height:260px;">
            <el-table ref="multipleTable" border :data="rightTableList" height="calc(100% - 40px)" stripe @selection-change="handleSelectionChange2">
              <el-table-column type="selection" width="40px" align="center" />
              <!-- 点检项 -->
              <el-table-column show-overflow-tooltip label="点检项">
                <template #default="{ row }">{{ row.itemName }}{{ row.itemCode ? '【' + row.itemCode + '】' : '' }}</template>
              </el-table-column>
              <!-- 描述 -->
              <el-table-column show-overflow-tooltip label="描述" prop="remark" />
            </el-table>
            <div class="pageBox" style="margin-top:5px;">
              <el-pagination v-if="showPage" background :current-page.sync="search.current" :page-sizes="[5, 10, 15, 20, 50, 100]" :page-size="search.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </el-row>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'MaintenanceSetting',
  props: {
    fields: {}
  },
  data() {
    return {
      /** 未分配搜索字段 */
      leftKeyword: '',
      /** 已分配搜索字段 */
      rightKeyword: '',
      /** 未选中 */
      multipleSelection: [],
      /** 已选中 */
      multipleSelection2: [],
      /** 弹窗 */
      dialogVisible: false,
      /** 未选择 */
      leftTableList: [],
      /** 已选择 */
      rightTableList: [],
      rows: {},
      search: {
        equipId: '',
        id: '',
        keyword: '',
        current: 1, // 当前页
        size: 15 // 每页数量
      },
      total: 0,
      loading: false,
      showPage: true
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    /* 获取数据 */
    getInfo(row) {
      this.rows = row
      this.leftTable()
      this.rightTable()
      this.dialogVisible = true
    },
    /* 未选择的 */
    async leftTable() {
      const res = await this.$axios.get(
        `/equip/point/setting/equip/noSelect?keyword=${this.leftKeyword}&id=${this.rows.id}`
      )
      if (res.data.code === 200) {
        this.leftTableList = res.data.data
      }
    },
    /* 已选择 */
    async rightTable(page = 1) {
      this.search.current = page
      this.search.equipId = this.rows.id
      const res = await this.$axios.post(
        `/equip/point/setting/equip/select`,
        this.search
      )
      if (res.data.code === 200) {
        this.rightTableList = res.data.data.list
        this.total = res.data.data.total
      }
    },
    /** 未选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /** 已选择 */
    handleSelectionChange2(val) {
      this.multipleSelection2 = val
    },
    handleSizeChange(val) {
      this.$confirm('当前页所选的没有保存的数据将清空，确认切换？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.search.size = val
          this.rightTable(this.search.current)
        })
        .catch(() => {
          this.search.current = 1
          this.search.size = 15
          this.showPage = false
          this.$nextTick(() => {
            this.showPage = true
            this.rightTable(this.search.current)
          })
        })
    },
    handleCurrentChange(val) {
      this.$confirm('当前页所选的没有保存的数据将清空，确认切换？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.search.current = val
          this.rightTable(this.search.current)
        })
        .catch(() => {})
    },
    /* 批量添加 */
    async batchAdd() {
      const arr = []
      this.multipleSelection.forEach((item) => {
        arr.push(item.id)
      })
      const obj = {
        id: this.rows.id,
        itemIds: arr
      }
      const res = await this.$axios.post(
        '/equip/point/setting/equip/insertBatch',
        obj
      )
      if (res?.data.code === 200) {
        this.$message.success('添加成功！')
        this.leftTable()
        this.rightTable(1)
      }
    },
    /* 批量删除 */
    async batchDelete() {
      const arr = []
      this.multipleSelection2.forEach((item) => {
        arr.push(item.itemId)
      })
      const obj = {
        id: this.rows.id,
        itemIds: arr
      }
      const res = await this.$axios.post(
        '/equip/point/setting/equip/removeBatch',
        obj
      )
      if (res?.data.code === 200) {
        this.$message.success('删除成功！')
        this.leftTable()
        this.rightTable(1)
      }
    },
    /* 保存 */
    async rightSave() {
      const res = await this.$axios.post(
        '/equip/point/setting/equip/saveBatch',
        this.multipleSelection2
      )
      if (res?.data.code === 200) {
        this.$message.success('保存成功！')
        this.rightTable(1)
      }
    },
    /* 关闭事件 */
    closeChange() {
      this.search = {
        keyword: '',
        current: 1, // 当前页
        size: 15 // 每页数量
      }
      this.rows = {}
      this.rightTableList = []
      this.leftTableList = []
      this.leftKeyword = ''
      this.rightKeyword = ''
      this.total = 0
      this.multipleSelection = []
      this.multipleSelection2 = []
      this.$emit('getTableInfo')
    }
  }
}
</script>

<style lang="scss" scoped>
.transferbox {
  width: 100%;
  padding: 0 10px 0 10px;
  height: 50%;
  .topbox {
    margin: 10px 10px;
  }
}
/* 水平布局 */
.level {
  height: 100%;
  .titlebox {
    padding-left: 8px;
    font-size: 18px;
    background: #eee;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    width: 100%;
    position: relative;
    .searchboxLeft {
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0px;
      width: 485px;
      .el-input {
        width: 370px;
        float: left;
        margin-right: 10px;
      }
      .searchBtn {
        width: 100px;
        float: left;
      }
    }
    .searchbox {
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0px;
      width: 485px;
      .el-input {
        width: 370px;
        float: left;
        margin-right: 10px;
      }
      .searchBtn {
        width: 100px;
        float: left;
      }
    }
  }
}
.dialog-btn {
  text-align: right;
}
</style>
<style lang="scss">
.djDialog {
  .el-dialog__body {
    height: calc(100% - 80px) !important;
  }
}
</style>
